<template>
    <div class="page-container page-container-create">
        <div class="breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员中心</el-breadcrumb-item>
        <el-breadcrumb-item>会员引流</el-breadcrumb-item>
        <el-breadcrumb-item>创建引流规则</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
        <p class="font22 mb20">创建会员引流规则</p> 
        <div class=" stepset1 stepset" >
            <ul>
                <li :class="{'active':active>=1}"><span>1</span><p>设置规则</p></li>
                <li :class="{'active':active>=2}"><span>2</span><p>编辑触达内容</p></li>
                <li :class="{'active':active>=3}"><span>3</span><p>创建成功</p></li>
            </ul>
        </div>
        <div v-show="active == 1" class="content create_stepOne createSet create_stepAlso">
            <!-- 设置规则 -->
            <el-form
                :model="dataForm"
                :rules="dataFormRules"
                ref="dataForm">
                        <el-form-item label="规则名称：" prop="drainageName" class="mb30" label-width="92px">
                            <el-input
                            clearable
                            type="text"
                            v-model="dataForm.drainageName"
                            placeholder="请输入规则名称"
                            maxlength="64"
                            size="mini"
                            class="w620"
                            />
                            <el-tooltip  effect="dark" content="可输入3-64个字符" placement="right">
                                <i class="tipsInfo">!</i>
                            </el-tooltip>
                        </el-form-item>
                    
                    <el-row class="mb30 labelAlignment">
                        <el-form-item label="类型：" prop="drainageTypeList" class="wid t_r" label-width="92px">
                            <el-checkbox-group v-model="dataForm.drainageTypeList" @change="drainageTypeChange">
                                <el-checkbox label="1" >
                                  <span class="turnInlineBlock w126 t_l">发短信</span>
                                </el-checkbox>
                                <el-checkbox label="2" >
                                    <span class="turnInlineBlock w126 t_l">发邮件</span>    
                                </el-checkbox>
                                <el-checkbox label="3" >
                                    <span class="turnInlineBlock w126 t_l">H5入驻</span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-row>

                    <el-row class="mb30 labelAlignment channel">
                        <el-form-item label="发布渠道：" prop="channelCodeList" class="wid t_r" label-width="92px">
                            <div style="display: flex;">
                                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange" style="margin-right:10px !important">
                                 <span class="turnInlineBlock w126 t_l">全选</span>   
                                </el-checkbox>
                                <el-checkbox-group v-model="dataForm.channelCodeList" @change="handleCheckedCitiesChange" class="spcCheckbox">
                                    <el-checkbox :label="child.id" v-for="(child,index) in childList" :key="index" class=" mb10">
                                    <span class="turnInlineBlock w126 oe t_l" style="vertical-align:middle">{{child.childName}}</span>
                                    </el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </el-form-item>
                    </el-row>

                    <el-row class="mb120">
                        <el-form-item label="申请备注：" class="wid" label-width="92px">
                            <el-input
                                type="textarea"
                                placeholder="请描述详细的目的，规则，时间等信息，以便顺利通过审核"
                                v-model="dataForm.remark"
                                maxlength="1000"
                                show-word-limit
                                class="w620"
                                :autosize="{minRows:6 }"
                            ></el-input>
                            <el-tooltip class="item" effect="dark" content="最多可输入1000个字符" placement="right">
                                <i class="tipsInfo">!</i>
                            </el-tooltip>
                        </el-form-item>
                    </el-row>

            
            
            </el-form>
        </div>

        <div v-show="active == 2" class="tab-container createSet active2">
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="短信" name="1" v-if="dataForm.drainageTypeList.indexOf('1') != -1">
                    <sendSms ref="sendSms"></sendSms>
                </el-tab-pane>
                <el-tab-pane label="邮件" name="2" v-if="dataForm.drainageTypeList.indexOf('2') != -1">
                    <sendMail ref="sendMail"></sendMail>
                </el-tab-pane>
                <el-tab-pane label="H5入驻" name="3" v-if="dataForm.drainageTypeList.indexOf('3') != -1">
                    <H5Settle ref="H5Settle"></H5Settle>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-show="active == 3" class="tab-container tab-success createSet">
            <div class="titleInfo">
                <img src="/static/images/success.png" />
                <span class="font20">创建成功！</span>
            </div>
            <div class="step-button2">
                <el-button type="primary" plain @click="returnList">返回列表</el-button>
            </div>
        </div>
        <!-- 上下按钮部分 -->
        <div class="step-button" v-if="active < 5">
        <el-button
            class="resetButton"
            :size="size"
            v-if="active != 1 && active != 3"
            @click="back"
        >上一步</el-button>
        <el-button class="searchButton" v-if="active != 3 && active != 2" :size="size" @click="next">下一步</el-button>
        <el-button class="searchButton" v-if="active == 2" :size="size" @click="save">确定</el-button>
        </div>
    </div>
</template>

<script>
import sendSms from './components/sendSms'
import sendMail from './components/sendMail'
import H5Settle from './components/H5Settle'
export default {
    components:{
        sendSms,
        sendMail,
        H5Settle
    },
    data(){
        return{
            size:"mini",
            active : 1,
            dataForm:{
                drainageName: null,
                drainageTypeList:[],
                channelCodeList:[],
            },
            dataFormRules:{
                drainageName:[
                    { required: true, message: "请输入规则名称", trigger: "blur" },
                    { min: 3, max: 64, message: "长度在 3 到 64 个字符", trigger: "blur" }
                ],
                drainageTypeList:[
                    { required: true , message:"请选择类型", trigger:"change"}
                ],
                channelCodeList:[
                    { required: true , message:"请选择发布渠道", trigger:"change"}
                ],
            },
            isIndeterminate: false,
            checkAll: false,

            activeName: null, //触达内容

            childList:[], //发布渠道

        }
    },
    methods:{
        returnList(){
            this.$router.push("/pages/memberCenter/drainage/DrainageApply");
        },
        handleCheckAllChange(val) {
            let selectChild = this.childList.map(function(item){
                return item.id;
            })
            this.$set(this.dataForm,"channelCodeList", val ? selectChild : []);
            this.isIndeterminate = false;
            this.checkAll = val;
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.childList.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.childList.length;
        },
        /**
         * 选中触发类型
         */
        drainageTypeChange(){
            //数组排序
            this.dataForm.drainageTypeList = this.dataForm.drainageTypeList.sort(function(a, b){return Number(a) - Number(b)});
        },
        /**
         * 下一步
         */
        next(){
            if(this.active == 1){
                 this.$refs['dataForm'].validate(valid => {
                    if (valid) {
                        this.activeName = this.dataForm.drainageTypeList[0];
                        this.active++;
                    }
                })
            }
        },
        /**
         * 上一步
         */
        back(){
            this.active--;
        },
        save(){
            //保存信息
            this.dataForm.drainageTypes = this.dataForm.drainageTypeList.join(",");
            this.dataForm.channelCodes = this.dataForm.channelCodeList.join(",");
            let param = {};
            if(this.dataForm.drainageTypes.indexOf("1") != -1){
                let smsInfo = this.$refs.sendSms.getPreview();
                if(smsInfo == null){
                    return false;
                }
                param.smsInfo = smsInfo;
            }
            if(this.dataForm.drainageTypes.indexOf("2") != -1){
                let mailInfo = this.$refs.sendMail.getPreview();
                if(mailInfo == null){
                    return false;
                }
                param.mailInfo = mailInfo;
            }
            if(this.dataForm.drainageTypes.indexOf("3") != -1){
                let settleInfo = this.$refs.H5Settle.getPreview();
                if(settleInfo == null){
                    return false;
                }
                param.settleInfo = settleInfo;
            }
            this.dataForm.drainageVariables = JSON.stringify(param);
            if(this.dataForm.id != null && this.dataForm.id != 0){
                //修改
                this.utils.request.updateDrainage(this.dataForm,res=>{
                    if(res.code == '0000'){
                        this.active++;
                    }
                })
            }else{
                this.dataForm.deptName = JSON.parse(localStorage.getItem("user")).deptName;
                this.utils.request.addDrainage(this.dataForm,res=>{
                    if(res.code == '0000'){
                        this.active++;
                    }
                })
            }

        }
    },
    created(){
        let deptType = localStorage.getItem("deptType");
        if(deptType != null && deptType != '1'){
            this.$message({"type":"error","message":"非法访问"})
            setTimeout(function () {
                this.$router.push("/");
            }, 3000);
            throw new Error("非法访问");
        }
    },
    mounted(){
        this.dataForm.id = Number(this.$route.params.id);
        this.utils.request.queryAllChild({},res=>{
            if(res.code == '0000'){
                this.childList = res.data;
                this.childList.unshift({"deptId":179,"childName":"卡奥斯运营中心","id":"179"});

                if(this.dataForm.id != 0){
                    this.utils.request.queryDrainageById({id:this.dataForm.id},res=>{
                        if(res.code == '0000'){
                            for(var key in res.data){
                                this.$set(this.dataForm,key,res.data[key])
                            }
                            this.$set(this.dataForm,"drainageTypeList", res.data["drainageTypes"].split(","));
                            this.$nextTick(()=>{
                                this.$set(this.dataForm,"channelCodeList",res.data["channelCodes"].split(","));
                                if(this.dataForm.channelCodeList != null && this.dataForm.channelCodeList.length == this.childList.length){
                                    this.isIndeterminate = false;
                                    this.checkAll = true;
                                }else if(this.dataForm.channelCodeList != null && this.dataForm.channelCodeList.length < this.childList.length){
                                    this.checkAll = false;
                                    this.isIndeterminate = true;
                                }

                                let variables = JSON.parse(res.data.drainageVariables);

                                if(this.dataForm.drainageTypes.indexOf("1") != -1){
                                    this.$refs.sendSms.tTempalteListAll(variables.smsInfo);
                                }
                                if(this.dataForm.drainageTypes.indexOf("2") != -1){
                                    this.$refs.sendMail.tTempalteListAll(variables.mailInfo);
                                }
                                if(this.dataForm.drainageTypes.indexOf("3") != -1){
                                    this.$refs.H5Settle.setInfo(variables.settleInfo);
                                }


                            })
                        }
                    })
                }
            }
        })
    }
}
</script>

<style lang="scss" scoped>
    /deep/ .el-checkbox{
        margin-right: 10px;
    }
    .channel{
        text-align: left;
        /deep/ .el-form-item__content{
            width: 690px;
        }
    }
    /deep/ .el-checkbox-group{
        text-align: left;
    }
    
.stepset{
    ul{
        width: 580px;
    }
    
}
.w620{
    width: 620px;
    /deep/ .el-input__inner{
        width: 620px;
    }
}
.w126{
  width: 126px;
}
.oe{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.width100{
  width: 97px;
}
.w104{
  width: 104px;
}
.ml60{
  margin-left: 60px;
}
.pdl30{
  padding-left: 30px;
}
.pdt20{
  padding-top: 20px;
}
.w100{
    width: 100px;
}
.spcCheckbox{
    /deep/ .el-checkbox__inner{
        display: inline-block;
        vertical-align: middle;
    }
}
</style>